<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Multiple Knob widgets with marks</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknob.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>

    <style type="text/css">
        #knobContainer {
            position: relative;
        }

        .inputField {
            left: 150px;
            top: 110px;
            width: 100px;
            height: 40px;
            position: absolute;
        }

        .inputField2 {
            left: 100px;
            top: 90px;
            width: 100px;
            height: 80px;
            position: absolute;
        }

        .inputField3 {
            left: 75px;
            top: 120px;
            width: 150px;
            height: 40px;
            position: absolute;
        }

        #knob2 {
            position: absolute !important;
            top: 50px;
            left: 50px;
        }

        #knob3 {
            position: absolute !important;
            top: 0;
            left: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            var startValue1, startValue2, startValue3;
            startValue1 = startValue2 = startValue3 = 60;
            $('#knobContainer').jqxKnob({
                value: startValue1,
                min: 0,
                max: 100,
                width: 400,
                height: 400,
                startAngle: 180,
                endAngle: 360,
                snapToStep: true,
                rotation: 'clockwise',
                style: { fill: '#FFFFFF' },
                marks: {
                    drawAboveProgressBar: true,
                    colorRemaining: 'white',
                    colorProgress: 'white',
                    type: 'line',
                    offset: '78%',
                    thickness: 2,
                    size: '18%',
                    minorInterval: 5
                },
                progressBar: {
                    style: { fill: '#407ec3', stroke: '#407ec3' },
                    size: '18%',
                    offset: '78%',
                    background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
                },
                pointer: { type: 'arrow', visible: true, style: { fill: '#ef6100' }, size: '92%', offset: '98%', thickness: 15 }
            });
            var input = $('<div class="inputField">');
            var input2 = $('<div class="inputField2">');
            var input3 = $('<div class="inputField3">');
            var knob2 = $('<div id="knob2">');
            var knob3 = $('<div id="knob3">');
            $('#knobContainer').append(knob2);

            $('#knob2').jqxKnob({
                value: startValue2,
                min: 0,
                max: 100,
                startAngle: 180,
                width: 300,
                height: 300,
                endAngle: 260,
                snapToStep: true,
                pointerGrabAction: 'progressBar',
                rotation: 'clockwise',
                style: { fill: 'transparent' },
                marks: {
                    drawAboveProgressBar: true,
                    colorRemaining: 'white',
                    colorProgress: 'white',
                    type: 'line',
                    offset: '78%',
                    thickness: 2,
                    size: '18%',
                    minorInterval: 5
                },
                progressBar: {
                    style: { fill: '#ef6100', stroke: '#ef6100' },
                    size: '18%',
                    offset: '78%',
                    background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
                },
                pointer: { type: 'line', visible: false, style: { fill: '#33AADD' }, size: '18%', offset: '78%', thickness: 0 }
            });

            $(knob2).append(knob3);

            $('#knob3').jqxKnob({
                value: startValue3,
                min: 0,
                max: 100,
                startAngle: 280,
                width: 300,
                height: 300,
                endAngle: 360,
                snapToStep: true,
                pointerGrabAction: 'progressBar',
                rotation: 'clockwise',
                style: { fill: 'transparent' },
                marks: {
                    drawAboveProgressBar: true,
                    colorRemaining: 'white',
                    colorProgress: 'white',
                    type: 'line',
                    offset: '78%',
                    thickness: 2,
                    size: '18%',
                    minorInterval: 5
                },
                progressBar: {
                    style: { fill: '#18a25e', stroke: '#18a25e' },
                    size: '18%',
                    offset: '78%',
                    background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
                },
                pointer: { type: 'line', visible: false, style: { fill: '#00a4e1' }, size: '18%', offset: '78%', thickness: 0 }
            });


            // Add label element to the Knob widget and attach event handlers to update them when the widget value updates.
            // Note that labels need not be sub elements of the knobs, and they are there just to display that they can be.
            $('#knobContainer').append(input);
            $('#knob2').append(input2);
            $('#knob3').append(input3);

            var getKnobSpan = function (color, value, info) {
                return '<span style="font-size: 9px; width: 33%; display:inline-block; color: ' + color + ';">' + info[0] + '</span><span style="font-size: 11px; width:33%; color: ' + color + '; display:inline-block;">' + value + '</span><span style="width:33%; font-size: 9px; color: ' + color + '; display:inline-block;">' + info[1] + '</span>';
            }

            $('#knobContainer').on('change', function (event) {
                var html = getKnobSpan("#407ec3", event.args.value, ['All', 'Calls']);
                $(input).html(html);
                event.stopPropagation();
            });
            $('#knob2').on('change', function (event) {
                var html = getKnobSpan("#ef6100", event.args.value, ['Pending', 'Tickets']);
                $(input2).html(html);
                event.stopPropagation();
            });
            $('#knob3').on('change', function (event) {
                var html = getKnobSpan("#18a25e", event.args.value, ['Resolved', 'Tickets']);
                $(input3).html(html);
                event.stopPropagation();
            });

            var html = getKnobSpan("#407ec3", startValue1, ['All', 'Calls']);
            $(input).html(html);
            var html = getKnobSpan("#ef6100", startValue2, ['Pending', 'Tickets']);
            $(input2).html(html);
            var html = getKnobSpan("#18a25e", startValue3, ['Answered', 'Tickets']);
            $(input3).html(html);

        });
    </script>
</head>
<body>
    <div id='knobContainer'>
    </div>
</body>
</html>
